<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page isELIgnored="false" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>无标题文档</title>
    <link href="css/common.css" rel="stylesheet" type="text/css"/>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="wrap">
    <!-- main begin-->
    <div class="sale">
        <h1 class="lf">在线拍卖系统</h1>
        <div class="logout right">${auctionuser.userName}</div>
        <div class="logout right"><a href="login-admin.jsp" title="注销">注销</a></div>
    </div>
    <div class="forms">
        <label for="auctionName">名称</label>
        <input name="auctionName" type="text" class="nwinput" id="auctionName" value="${auction.auctionName}"/>
        <label for="auctionDesc">描述</label>
        <input name="auctionDesc" type="text" id="auctionDesc" class="nwinput" value="${auction.auctionDesc}"/>
        <label for="auctionStartTime">开始时间</label>
        <input name="auctionStartTime" type="text" id="auctionStartTime" class="nwinput"
               value="${auction.auctionStartTime}"/>
        <label for="auctionEndTime">结束时间</label>
        <input name="auctionEndTime" type="text" id="auctionEndTime" class="nwinput" value="${auction.auctionEndTime}"/>
        <label for="auctionStartPrice">起拍价</label>
        <input name="auctionStartPrice" type="text" id="auctionStartPrice" class="nwinput"
               value="${auction.auctionStartPrice}"/>
        <input name="userIsAdmin" id="userIsAdmin" type="hidden" value="1">

        <input name="queryAuction" type="button" value="查询" class="spbg buttombg f14  sale-buttom"/>
        <input type="button" value="发布" class="spbg buttombg f14  sale-buttom buttomb"
               onclick="window.location.href='${pageContext.request.contextPath}/auctionDetail.jsp?'"/>
    </div>
    <div class="items">
        <ul class="rows even strong">
            <li>名称</li>
            <li class="list-wd">描述</li>
            <li>开始时间</li>
            <li>结束时间</li>
            <li>起拍价</li>
            <li class="borderno">操作</li>
        </ul>
        <c:forEach items="${auctionList.getList()}" var="auction" varStatus="status">
            <ul class="rows ${status.index % 2 == 1 ? 'even' : ''}">
                <!-- 隐藏拍卖ID但可获取 -->
                <li data-auction-id="${auction.auctionId}" style="display:none;"></li>
                <li>${auction.auctionName}</li>
                <li class="list-wd">${auction.auctionDesc}</li>
                <li>${auction.auctionStartTime}</li>
                <li>${auction.auctionEndTime}</li>
                <li>${auction.auctionStartPrice}</li>
                <li class="borderno red">
                    <a href="#" title="竞拍" onclick="editAuction(this)">修改</a>|
                    <a href="#" title="竞拍" onclick="dele(this)">删除</a>
                </li>
            </ul>
        </c:forEach>
        <div class="page">
            <button type="button" class="page-first">首页</button>
            <button type="button" class="page-prev">上一页</button>
            <button type="button" class="page-next">下一页</button>
            <button type="button" class="page-last">尾页</button>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            function abc() {

                if (confirm("你真的确认要删除吗？请确认")) {

                    return true;
                } else {
                    return false;
                }

            }


            // 获取分页元素
            const firstBtn = document.querySelector('.page-first');
            const prevBtn = document.querySelector('.page-prev');
            const nextBtn = document.querySelector('.page-next');
            const lastBtn = document.querySelector('.page-last');
            const queryAuction = document.querySelector('[name="queryAuction"]');


            // 获取分页信息
            let pageNum = ${auctionList.pageNum};
            let pageSize =${auctionList.pageSize};
            let totalPages = ${auctionList.pages};


            // 首页和上一页控制
            firstBtn.style.display = pageNum <= 1 ? 'none' : 'inline-block';
            prevBtn.style.display = pageNum <= 1 ? 'none' : 'inline-block';
            // 下一页和尾页控制
            nextBtn.style.display = pageNum >= totalPages ? 'none' : 'inline-block';
            lastBtn.style.display = pageNum >= totalPages ? 'none' : 'inline-block';
            // 点击事件
            firstBtn.addEventListener('click', function () {
                pageNum = 1;
                // 调用分页函数
                getPageData(pageNum, pageSize);
            });
            prevBtn.addEventListener('click', function () {
                if (pageNum > 1) {
                    pageNum--;
                } else {
                    pageNum = 1;
                }
                // 调用分页函数
                getPageData(pageNum, pageSize);
            })
            nextBtn.addEventListener('click', function () {
                if (pageNum < totalPages) {
                    pageNum++;
                } else {
                    pageNum = totalPages;
                }
                // 调用分页函数
                getPageData(pageNum, pageSize);
            })
            lastBtn.addEventListener('click', function () {
                pageNum = totalPages;
                // 调用分页函数
                getPageData(pageNum, pageSize);

            })
            queryAuction.addEventListener('click', function () {
                pageNum = 1;
                pageSize = 5;
                // 调用分页函数
                getPageData(pageNum, pageSize);
            })

            function getPageData(pageNum, pageSize) {

                // 获取查询条件
                const auctionName = document.getElementById('auctionName').value;
                const auctionDesc = document.getElementById('auctionDesc').value;
                const auctionStartTime = document.getElementById('auctionStartTime').value;
                const auctionEndTime = document.getElementById('auctionEndTime').value;
                const auctionStartPrice = document.getElementById('auctionStartPrice').value;
                const userIsAdmin = document.getElementById('userIsAdmin').value;

                // 跳转到Servlet
                window.location.href = "/auction/do/page?auctionName=" + auctionName + "&auctionDesc=" + auctionDesc + "&auctionStartTime=" + auctionStartTime + "&auctionEndTime=" + auctionEndTime + "&auctionStartPrice=" + auctionStartPrice + "&userIsAdmin=" + userIsAdmin + "&pageNum=" + pageNum + "&pageSize=" + pageSize;
            }
        });

        // 操作示例
        function editAuction(element) {
            const auctionId = element.closest('ul').querySelector('[data-auction-id]').dataset.auctionId;
            // 跳转到编辑页面
            window.location.href = "/auction/do/edit?auctionId=" + auctionId;
            console.log("编辑拍卖项ID:", auctionId);
        }

        function dele(element) {
            if (confirm("你真的确认要删除吗？请确认")) {
                const auctionId = element.closest('ul').querySelector('[data-auction-id]').dataset.auctionId;
                // 跳转到编辑页面
                window.location.href = "/auction/do/delete?auctionId=" + auctionId;
            }
        }
    </script>
    <!-- main end-->
</div>
</body>
</html>
